<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- align-items属性定义项目在交叉轴上如何对齐。 -->
		<style>
			.contain{
				width: 700px;
				height: 800px;
				background-color: cornsilk;
				display: flex;
				align-items: flex-end;
				/* flex-start：交叉轴的起点对齐。
				flex-end：交叉轴的终点对齐。
				center：交叉轴的中点对齐。
				baseline: 项目的第一行文字的基线对齐。
				stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 */
			}
		</style>
	</head>
	<body>
		<div class="contain">
		<div style="width: 100px; height: 100px; background-color: #6495ED;">1</div>
		<div style="width: 100px; height: 200px; background-color: #ADFF2F;">2</div>
		<div style="width: 100px; height: 300px;background-color: #B8860B;">3</div>
		<div style="width: 100px; height: 400px; background-color: #FFF0F5;">4</div>
		</div>
	</body>
</html>
